<script setup>
import SERVICE from '@/api/example';
import { useUserStore } from '@/stores/user';
import { Toast } from 'vant';

const user = useUserStore();
user.clearUserInfo();

const router = useRouter();

const loginName = ref('195730');

const password = ref('12345');

const canSubmit = computed(() => {
  return loginName.value.length > 0 && password.value.length > 0;
});

const onSubmit = async () => {
  Toast.loading('登录中');
  try {
    const data = { loginName: unref(loginName), password: unref(password) };
    const login = await SERVICE.login(data);
    if (login.getStatus() === 1) {
      const token = login.get('x-token');
      user.loginSuccess(token, loginName.value);
      const userInfo = await SERVICE.getUserInfo(data);
      if (userInfo.getStatus() === 1) {
        const result = userInfo.get('result');
        user.username = result.userName;
        user.userData = result;
        localStorage.setItem('loginName', loginName.value);
        localStorage.setItem('x-token', token);
        localStorage.setItem('userData', JSON.stringify(result));
        Toast.clear();
        await router.replace('/');
      } else {
        Toast(userInfo.getMsg());
      }
    } else {
      Toast(login.getMsg());
    }
  } catch (err) {
    Toast('内部异常');
  }
};
</script>
<template>
  <XPage title="登录" hide-header>
    <div class="app-slogan">基础开发平台</div>
    <div class="cross-fade" />
    <van-form class="login-form" @submit="onSubmit">
      <van-cell-group class="login-input" inset>
        <van-field
          v-model="loginName"
          name="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          clearable
        />
        <van-divider class="login-divider" />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
          clearable
        />
        <van-divider class="login-divider" />
      </van-cell-group>
      <div class="login-submit">
        <van-button block type="primary" native-type="submit" :disabled="!canSubmit">
          登录
        </van-button>
      </div>
    </van-form>
  </XPage>
</template>

<style lang="stylus" scoped>

.app-slogan
    display flex
    align-items center
    padding-left 32px
    font-family PingFangSC-Medium, "PingFang SC"
    font-size 20px
    font-weight 500
    color rgb(0 0 0 / 85%)
    background-image url("@/assets/img/home_bg.png")
    background-position-y -24px
    background-size 100% auto

    &::before
      display block
      padding-bottom 75.47%;
      content ''

  .cross-fade
    height 64px
    margin-top -64px
    background linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--common-bg) 100%)

  .login-form
    padding 24px 0
    margin 16px
    margin-top -16%
    background white
    box-shadow 0 1px 3px rgba(0, 0, 0, 12%), 0 1px 2px rgba(0, 0, 0, 24%)

    .login-input

      ::after
        border-bottom 0

      .login-divider
        padding 0
        margin 4px

    .login-submit
      margin-top 32px
</style>
